*{
    margin: 0;
    padding: 0;
    font-size: 60px;
}
.box{
    height: 400px;
    width: 400px;
    margin: 100px auto;
    border-radius: 50%;
    border: 1px solid black;
    background:linear-gradient( 90deg, white 50%,black 50%);
    z-index: 10;
    animation:liset 4s infinite linear;
}
.left{
    background-color: white;
}
.left,.right{
    width: 200px;
    height: 100px;
    padding-top: 100px;
    border-radius: 50%;
    margin: 0 auto;
}
.right{
    background-color: black;
}
.small-left{
    background-color: black;
}
.masll-right{
    background-color: white;
}
.small-left,.masll-right{
    height: 60px;
    width: 60px;
    margin: -10px auto;
    border-radius: 50%;
}
@keyframes liset {
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}
/*
.foot{
    margin-top: 30px;
    height: 120px;
    width: 300px;
    background-color: chartreuse;
    animation-name: lose; !*名称*!
    animation-delay: 2s;  !*时间*!
    animation-duration: 4s; !*延迟多少时间*!
    animation-iteration-count: infinite;  !*2持续2秒  infinite 一直持续*!
    animation-timing-function: linear;
    animation: lose 2s 4s infinite linear;!*简写*!
}
@keyframes lose {
    0%{background-color: red}
    20%{background-color: white}
    60%{background-color: chocolate}
    80%{background-color: coral}
    100%{background-color: black}
}
*/
